<template>
  <div>
    <div
      class=""
      style="height: 865px;position: relative;width: 1860px; margin-top: 20px;;padding: 40px;"
    >
      <!-- 主模块 -->
      <div
        class=""
        style=""
      />

      <div style="display: flex;justify-content: space-between;">
        <div class="numBlock">
          <div class="numTitle">
            总电量
          </div>
          <div class="value">
            <span class="number">{{ yd_total }}</span>
            <span class="unit">kwh</span>
          </div>
          <div class="total">
            <span style="margin-right: 20px;">生产：{{ yd_sc_total }} kwh </span>
            <span>公辅：{{ yd_gf_total }} kwh </span>
          </div>
        </div>
        <div class="numBlock">
          <div class="numTitle">
            年度电量
          </div>
          <div class="value">
            <span class="number">{{ yd_total_year }}</span>
            <span class="unit">kwh</span>
          </div>
          <div class="total">
            <span style="margin-right: 20px;">生产：{{ yd_sc_total_year }} kwh </span>
            <span>公辅：{{ yd_gf_total_year }} kwh </span>
          </div>
        </div>
        <div class="numBlock">
          <div class="numTitle">
            季度电量
          </div>
          <div class="value">
            <span class="number">{{ yd_total_quarter }}</span>
            <span class="unit">kwh</span>
          </div>
          <div class="total">
            <span style="margin-right: 20px;">生产：{{ yd_sc_total_quarter }} kwh </span>
            <span>公辅：{{ yd_gf_total_quarter }} kwh </span>
          </div>
        </div>
        <div class="numBlock">
          <div class="numTitle">
            月电量
          </div>
          <div class="value">
            <span class="number">{{ yd_total_month }}</span>
            <span class="unit">kwh</span>
          </div>
          <div class="total">
            <span style="margin-right: 20px;">生产：{{ yd_sc_total_month }} kwh </span>
            <span>公辅：{{ yd_gf_total_month }} kwh </span>
          </div>
        </div>
        <div class="numBlock">
          <div class="numTitle">
            日电量
          </div>
          <div class="value">
            <span class="number">{{ yd_total_day }}</span>
            <span class="unit">kwh</span>
          </div>
          <div class="total">
            <span style="margin-right: 20px;">生产：{{ yd_sc_total_day }} kwh </span>
            <span>公辅：{{ yd_gf_total_day }} kwh </span>
          </div>
        </div>
      </div>
      <div style="position: absolute;top: 230px;left: 40px;">
        <!-- 模块1 -->
        <div
          class="bg"
          style="height: 620px;position: relative;width: 1470px;"
        >
          <div>
            <img src="../assets/icon-left-top.png">
            <div style="position: absolute;bottom: 0;">
              <img src="../assets/icon-left-bottom.png">
            </div>
            <div style="position: absolute;top: 3px;right: 3px;">
              <img src="../assets/icon-right-top2.png">
            </div>
            <div style="position: absolute;bottom: 0;right: 3px;">
              <img src="../assets/icon-right-bottom.png">
            </div>
          </div>
          <div
            class="d-flex"
            style="justify-content: space-between;"
          >
            <div class="title">
              <img src="../assets/icon-title.png">
              <span style="margin-left: 5px;">用电情况</span>
            </div>
            <div style="position: relative;top: -18px;right: 10px;">
              <el-date-picker
                v-model="reportDate"
                type="date"
                placeholder="选择日期"
                size="mini"
                class="searchInput"
                style="width: 130px"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              />
            </div>
          </div>

          <div
            v-for="(headDataOne,index) in headData"
            :key="index"
            class="d-flex jc-center body-box radio-group-container"
          >
            <el-tabs v-model="activeName[index]">
              <el-tab-pane
                v-for="(item,idx) in headDataOne"
                :key="index+idx"
                :label="item.label"
                :name="idx+''"
              >
                <div style="min-height: 190px;margin-top: 10px;">
                  <div
                    style="display: flex; flex-wrap: wrap;justify-content: flex-start; width: 1360px;"
                  >
                    <div
                      v-for="(item2,idx2) in item.children"
                      :key="idx2"
                      style="padding: 10px;"
                    >
                      <div class="numBlockSmall">
                        <div class="numTitle">
                          {{ item2.label }}
                        </div>
                        <div class="value">
                          <span
                            v-if="tableData[index].length>0"
                            class="number"
                          >{{ tableData[index][0][item2.prop] }}</span>
                          <span
                            v-else
                            class="number"
                          >--</span>
                          <span class="unit">kwh</span>
                        </div>
                        <div class="total">
                          累计：
                          <span
                            v-if="tableData[index].length>1"
                          >{{ tableData[index][1][item2.prop] }}</span>
                          <span v-else>--</span>
                          kwh
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div style="position: absolute;top: 230px;right: 40px;">
        <!-- 模块1 -->
        <div
          class="bg"
          style="height: 300px;position: relative;width: 290px;"
        >
          <div>
            <img src="../assets/icon-left-top.png">
            <div style="position: absolute;bottom: 0;">
              <img src="../assets/icon-left-bottom.png">
            </div>
            <div style="position: absolute;top: 3px;right: 3px;">
              <img src="../assets/icon-right-top2.png">
            </div>
            <div style="position: absolute;bottom: 0;right: 3px;">
              <img src="../assets/icon-right-bottom.png">
            </div>
          </div>
          <div class="title">
            <img src="../assets/icon-title.png">
            <span style="margin-left: 5px;">用电排行</span>
          </div>
          <bottomLeft :date-str="reportDate" />
        </div>
        <!-- 模块2 -->
        <div
          class="bg"
          style="height: 310px;position: relative;width: 290px;margin-top: 10px;"
        >
          <div>
            <img src="../assets/icon-left-top.png">
            <div style="position: absolute;bottom: 0;">
              <img src="../assets/icon-left-bottom.png">
            </div>
            <div style="position: absolute;top: 3px;right: 3px;">
              <img src="../assets/icon-right-top2.png">
            </div>
            <div style="position: absolute;bottom: 0;right: 3px;">
              <img src="../assets/icon-right-bottom.png">
            </div>
          </div>
          <div class="title">
            <img src="../assets/icon-title.png">
            <span style="margin-left: 5px;">用电分布</span>
          </div>
          <pieChart1 :date-str="reportDate" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import bottomLeft from './electricComponent/bottomLeft.vue'
	import pieChart1 from './electricComponent/pieChart1.vue'
	export default {
		components: {
			bottomLeft,
			pieChart1
		},
		data() {
			return {

				reportDate: this.$moment().subtract(1, 'days').format('YYYY-MM-DD'),
				// reportDate: "2025-01-01",
				reportCata1: "",
				reportCata2: "",
				activeName: {
					"d_shengchan": 0,
					"d_gongfu": 0
				},
				url: {
					allTables: '/api/report/data/allTables',
					tableData: '/api/report/data/list',
					fieldsMap: '/api/report/reportFields/allMap',
					dianTotal: '/api/report/analysis/dianTotal',
				},
				yd_total_day: "0",
				yd_sc_total_day: "0",
				yd_gf_total_day: "0",
				yd_total_month: "0",
				yd_sc_total_month: "0",
				yd_gf_total_month: "0",
				yd_total_quarter: "0",
				yd_sc_total_quarter: "0",
				yd_gf_total_quarter: "0",
				yd_total_year: "0",
				yd_sc_total_year: "0",
				yd_gf_total_year: "0",
				yd_total: "0",
				yd_sc_total: "0",
				yd_gf_total: "0",
				fieldsMap: {},
				loading: false,
				tableData: {},
				headData: {
					"d_shengchan": [],
					"d_gongfu": []
				},
				allTables: [],
				allTablesNames: {},
			}
		},
		watch: {
			reportDate() {
				this.loading = false
				// this.getRunTime()
				this.getAllTables()
			}
		},
		mounted() {
			this.getFieldsMaps()
			this.getYdTotal()
			this.getAllTables()
		},
		methods: {
			getYdTotal() {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.dianTotal,
					params: {
						dateStr: this.reportDate
					}
				}).then(function(resultData) {
					var resData = resultData.data.data
					_this.yd_sc_total_day = (+resData.day.total_dian_sc).toFixed(1)
					_this.yd_gf_total_day = (+resData.day.total_dian_gf).toFixed(1)
					_this.yd_total_day = (resData.day.total_dian_sc + resData.day.total_dian_gf).toFixed(1)
					_this.yd_sc_total_month = (+resData.month.total_dian_sc).toFixed(1)
					_this.yd_gf_total_month = (+resData.month.total_dian_gf).toFixed(1)
					_this.yd_total_month = (resData.month.total_dian_sc + resData.month.total_dian_gf).toFixed(1)
					_this.yd_sc_total_quarter = (+resData.quarter.total_dian_sc).toFixed(1)
					_this.yd_gf_total_quarter = (+resData.quarter.total_dian_gf).toFixed(1)
					_this.yd_total_quarter = (resData.quarter.total_dian_sc + resData.quarter.total_dian_gf)
						.toFixed(1)
					_this.yd_sc_total_year = (+resData.year.total_dian_sc).toFixed(1)
					_this.yd_gf_total_year = (+resData.year.total_dian_gf).toFixed(1)
					_this.yd_total_year = (resData.year.total_dian_sc + resData.year.total_dian_gf).toFixed(1)
					_this.yd_sc_total = (+resData.all.total_dian_sc).toFixed(1)
					_this.yd_gf_total = (+resData.all.total_dian_gf).toFixed(1)
					_this.yd_total = (resData.all.total_dian_sc + resData.all.total_dian_gf).toFixed(1)

				})
			},
			// 构建表头树
			buildHeaderTree(columns, labels) {
				const headerMap = {}

				columns.forEach(column => {
					const fieldCode = column.fieldCode
					const countType = column.countType
					const labelStr = labels[fieldCode].fieldName
					const labelParts = labelStr.split('｜')

					let currentLevel = headerMap

					// 按照每一级表头创建树形结构
					labelParts.forEach((label, index) => {
						if (!currentLevel[label]) {
							currentLevel[label] = {
								label: label,
								children: {}
							}
						}
						// 最后一层绑定prop
						if (index === labelParts.length - 1) {
							currentLevel[label].prop = fieldCode
							currentLevel[label].countType = countType
						}
						currentLevel = currentLevel[label].children
					})
				})
				// 转换为数组格式的树结构
				var headerTree = this.mapToTree(headerMap)
				// console.log(headerTree, 'headerTree')
				return headerTree
			},
			// 将对象映射为树形结构数组
			mapToTree(map) {
				return Object.keys(map).map(key => {
					const node = {
						label: key,
						children: map[key].children ? this.mapToTree(map[key].children) : null,
						prop: map[key].prop || null,
						countType: map[key].countType,
						width: 80
					}

					return node
				})
			},
			getFieldsMaps() {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.fieldsMap
				}).then(function(resultData) {
					var fieldsMap = resultData.data.data.map
					_this.fieldsMap = fieldsMap
					// console.log(fieldsMap, 'fieldsMap')
				})
			},
			getAllTables() {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.allTables,
					params: {
						tableType: '1'
					}
				}).then(function(resultData) {
					var allTables = resultData.data.data.list
					_this.allTables = allTables
					for (let i = 0; i < allTables.length; i++) {
						// _this.getTableData(allTables[i]['reportCode'])
						if (allTables[i]['reportCode'] == "d_shengchan" || allTables[i]['reportCode'] ==
							"d_gongfu") {
							_this.allTablesNames[allTables[i]['reportCode']] = allTables[i]['reportName']
							_this.getTableData(allTables[i]['reportCode'], i)

						}
					}


				})
			},
			getTableData(reportCode, i) {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.tableData,
					params: {
						reportCode,
						reportDate: this.reportDate
					}
				}).then(function(resultData) {
					const tableDataOne = resultData.data.data.list
					// _this.tableData[reportCode] = tableDataOne
					_this.tableData[reportCode] = tableDataOne
					_this.loading = false
					// console.log(_this.tableData)
					_this.tableData = JSON.parse(JSON.stringify(_this.tableData))

					_this.headData[reportCode] = _this.buildHeaderTree(_this.allTables[i]
						.reportTableFieldsList, _this.fieldsMap)

					_this.headData = JSON.parse(JSON.stringify(_this.headData))

				})
			},
		}
	}
</script>

<style scoped>
	.numBlock {
		background-image: url(../assets/num-bg.png);
		background-size: 100% 100%;
		width: 300px;
		height: 150px;
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */

		.numTitle {
			font-size: 18px;
			/* 标题字体大小 */
			color: #ffffff;
			/* 标题字体颜色 */
			margin-bottom: 10px;
			/* 和数字部分的间距 */
			/* 和数字部分的间距 */
		}

		.value {
			display: flex;
			align-items: baseline;
			margin-top: 10px;
			/* 对齐数字和单位 */
		}

		.value .number {
			font-size: 36px;
			/* 数字字体大小 */
			color: #00d8ff;
			/* 数字字体颜色 */
			font-weight: bold;
			/* 数字加粗 */
		}

		.value .unit {
			font-size: 18px;
			/* 单位字体大小 */
			color: #ffffff;
			/* 单位字体颜色 */
			margin-left: 10px;
			/* 和数字之间的间距 */
		}

		.total {
			margin-top: 10px;
			font-size: 12px;
			/* 总计字体大小，比标题小 */
			color: #ffffff;
			/* 总计字体颜色 */
		}
	}



	.numBlockSmall {
		background-image: url(../assets/num-bg.png);
		background-size: 100% 100%;
		width: 150px;
		height: 70px;
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */


		.numTitle {
			font-size: 9px;
			/* 标题字体大小 */
			color: #ffffff;
			/* 标题字体颜色 */

			/* 和数字部分的间距 */
		}

		.value {
			display: flex;
			align-items: baseline;
			/* margin-top: 5px; */
			/* 对齐数字和单位 */
		}

		.value .number {
			font-size: 18px;
			/* 数字字体大小 */
			color: #00d8ff;
			/* 数字字体颜色 */
			font-weight: bold;
			/* 数字加粗 */
		}

		.value .unit {
			font-size: 9px;
			/* 单位字体大小 */
			color: #ffffff;
			/* 单位字体颜色 */
			margin-left: 5px;
			/* 和数字之间的间距 */
		}

		.total {
			/* margin-top: 5px; */
			font-size: 6px;
			/* 总计字体大小，比标题小 */
			color: #ffffff;
			/* 总计字体颜色 */
		}
	}




	/deep/ .el-tabs__item {
		font-size: 14px !important;
		padding: 0px 15px !important;
		height: 40px;
		border-radius: 5px;
		border: 2px solid #1a5cd7;
		margin-right: 10px;
		color: #8CB1D6;
	}

	/deep/ .el-tabs__item.is-active {
		background-color: #1a5cd7;
		/* 选中时背景色仍为透明 */
		color: #ffffff;
		/* 选中时文字颜色为蓝色 */
	}

	/deep/ .el-tabs__nav-wrap {
		display: flex;
		justify-content: center;
	}

	/deep/ .el-tabs__nav-wrap::after {
		height: 0px;
	}

	/deep/ .el-tabs__active-bar {
		height: 0px;
	}

	/deep/.el-tabs__header {
		margin: 0;
	}

	/deep/.el-input__inner {
		background-color: transparent !important;
		border: 1px solid #6989a7;
		color: #84a9ce
	}

	/deep/.el-input__prefix,
	.el-input__suffix {
		color: #84a9ce
	}
</style>
